<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
  <title>IJUFE</title>

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background:#746eec;
}

/* 页眉/Blog 标题 */
.header {
  padding: 30px;
  text-align: center;
  background: rgb(239, 149, 182);
}

.header h1 {
  font-size: 50px;
}

/* 设置上导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: rgb(247, 254, 150);
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #131212;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: rgb(251, 187, 222);
  color: black;
}

/* 创建两个不相等的彼此并排的浮动列 */
/* 左列 */
.leftcolumn {   
  float: left;
  width: 50%;
}

/* 右列 */
.rightcolumn {
  float: left;
  width: 50%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* 伪图像 */
.fakeimg {
  background-color: rgb(227, 142, 142);
  width: 100%;
  padding: 20px;
}

/* 为文章添加卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: rgb(232, 175, 175);
  margin-top: 20px;
}

/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My wonderful Website</h1>
  <p>爱打篮球的少年</p>
</div>

<div class="topnav">
  <a href="1.html">自我介绍</a>
  <a href="http://www.jxufe.edu.cn/">喜欢的地方</a>
</div>
<div class="row">
    <div class="leftcolumn">
      <div class="card">
        <h2>哈登的目标</h2>
        <h5>NBA 拉里—奥布莱恩冠军奖杯</h5>
        <div class="fakeimg" style="height:70px;">篮球位置<p>......</p></div>
        <div class="fakeimg" style="height:70px;">全能双分位</div>
      </div>
      <div class="card">
        <h2>效力球队</h2>
        <h5>费城75人</h5>
        <div class="fakeimg" style="height:70px;">历史第一全能双分位</div>
        <p>赛季生涯</p>
        <p>现役球员</p>
      </div>
    </div>
    <div class="rightcolumn">
      <div class="card">
        <h2>赛季荣誉</h2>
        <div class="fakeimg" style="height:150px;"><p>新赛季最佳新秀</p><p>6次入选最佳阵容第一阵容</p></div>
        <p>10次入选全明星</p>
      </div>
      <div class="card">
        <h3>最近</h3>
        <div class="fakeimg" style="height:50px;"><p>2021.10入选NBA75大巨星</p></div>
        <div class="fakeimg" style="height:50px;"><p>2012带队获得伦敦奥运会金牌</p></div>
        <div class="fakeimg" style="height:70px;"><p>3次得分王</p></div>
      </div>
      <div class="card">
      <h3>别名</h3>
      <p>大胡子</p>
      <p>登哥</p>
    </div>
  </div>
</div>
<div class="footer">
    <h2>哈登的夺冠梦正在进行</h2>
  </div>
  
  </body>
  </html>
